﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../Scripts/datav.min.vue.js"></script>
  <script src="../Scripts/lodash.min.js"></script>
  <script src="../Scripts/crypto-js.js"></script>
  <script src="../Scripts/secret.js"></script>
  <title>转工看板（生产作业会）</title>
  <style>
    html {
      background-image: url(../images/bg.jpg);
      color: #fff;
    }

    .el-form-item__label {
      color: #fff;
    }

    .el-select .el-tag {
      display: inline-block;
    }

    .el-date-editor--daterange.el-input,
    .el-date-editor--daterange.el-input__inner,
    .el-date-editor--timerange.el-input,
    .el-date-editor--timerange.el-input__inner {
      width: 300px;
    }

    .header-title {
      font-size: 20px;
    }

    .el-form-item {
      margin-bottom: 0px;
    }

    .red {
      color: red;
    }

    .chart-title {
      text-align: center;
      color: #fff;
      padding-top: 5px;
      font-size: 18px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div style="padding:0 5px;">
      <!-- 看板标题组件 -->
      <vue2-board-header :title="title"></vue2-board-header>

      <!-- 查询条件区 -->
      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" :label-position="'left'" :rules="rules"
        style="margin:10px;">
        <div>
          <el-form-item label="主制分厂:">
            <el-select v-model="queryInfo.factoryname" placeholder="请选择主制分厂" clearable filterable style="width:160px;">
              <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                <el-option v-for="item in group.options" :key="item.factoryname" :label="item.factoryname"
                  :value="item.factoryname">
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="承制分厂:">
            <el-select v-model="queryInfo.tofactoryname" placeholder="请选择主制分厂" filterable style="width:160px;"
              @change="factorySelectChange">
              <el-option v-for="f in toFactoryList" :key="f.factoryname" :label="f.factoryname" :value="f.factoryname">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop='productname' label="零件图号:">
            <el-autocomplete v-model.trim="queryInfo.productname" placeholder="请输入零件图号" :trigger-on-focus="false"
              style="width:140px;" :fetch-suggestions="searchProductAsync" :value-key="'productname'" :debounce="500">
            </el-autocomplete>
          </el-form-item>
          <el-form-item prop='containername' label="流水卡号:">
            <el-autocomplete v-model.trim="queryInfo.containername" placeholder="请输入流水卡号" style="width:240px;"
              :trigger-on-focus="false" :fetch-suggestions="searchContainerAsync" :value-key="'containername'"
              :debounce="500">
            </el-autocomplete>
          </el-form-item>
          <el-form-item label="筛选时间:" prop="selectdate">
            <el-date-picker v-model="queryInfo.selectdate" type="daterange" range-separator="至" style="width:240px;"
              value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="'Search'" size="default" @click="handleBtnSearch">查询</el-button>
          </el-form-item>
          <el-form-item label="切换其他看板:">
            <el-select v-model="selectPageName" placeholder="请选择" filterable @change="reloadUrl">
              <el-option v-for="item in urlMap" :key="item.pagename" :label="item.name" :value="item.pagename">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>

      <dv-border-box-10 title="排产完成率" ref="chart" style="position:relative;">
        <div class="tooltip">
          统计说明
          <el-popover placement="top-start" title="各指标统计规则说明:" width="600" trigger="hover">
            <i class="el-icon-info" slot="reference"></i>
            <p>1.【计划发出数】：统计【计划发出时间】在所选时间范围内的转工排产工序数。</p>
            <p>2.【准时发出数】：统计【计划发出时间】在所选时间范围内，且<span class="tooltip-lable">发出超期时间</span>等于0或-1的转工排产工序数。
              <span class="tooltip-lable">发出超期时间</span> = 承制分厂接收时间 - 计划发出时间。
            </p>
            <p>3.【准时到达率】：准时到达率 = 【准时发出数】 ÷ 【计划发出数】。</p>
            <p>4.【计划完成数】：统计【计划完成时间】在所选时间范围内，且<span class="tooltip-lable">发出超期时间</span>等于0或-1的转工排产工序数。</p>
            <p>5.【准时完成数】：统计【计划完成时间】在所选时间范围内，且<span class="tooltip-lable">发出超期时间</span>等于0或-1，且
              <span class="tooltip-lable red">完成超期时间</span>小于0的转工排产工序数。<span class="tooltip-lable red">完成超期时间</span> =
              承制分厂转工完成时间 - 计划完成时间。
            </p>
            <p>6.【准时完成率】：准时完成率 = 【准时完成数】 ÷ 【计划完成数】。</p>
        </div>
        <div class="chart-title">排产完成率</div>
        <div :style="{height:chartHeight + 'px'}" id="chart"></div>
      </dv-border-box-10>

      <!-- 各分厂排产率统计明细 -->
      <el-dialog :title="JijiaDetail.title" :width="'100%'" :top="'10px'" :visible.sync="JijiaDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="JijiaDetail.dataList" stripe border>
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportJijiaDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="主制分厂" prop="factoryname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件图号" prop="productname" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件名称" prop="productdescription" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="流水卡号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="转工工序" prop="workflowstepname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收人" prop="receiver" width="80"></el-table-column>
          <el-table-column label="接收时间" prop="recivedate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="转工状态" prop="status" width="80">
            <template slot-scope="scope">{{scope.row.status}}</template>
          </el-table-column>
          <el-table-column label="机加排产时间" prop="stepplancreatedate" width="100" :formatter="splitDate">
          </el-table-column>
          <el-table-column label="承制分厂排产时间" prop="stepplanshipdate" width="100" :formatter="splitDate">
          </el-table-column>
          <el-table-column label="机加排产人" prop="jjplaner" width="90"></el-table-column>
          <el-table-column label="排产状态" prop="planstatus" width="80">
            <template slot-scope="scope">
              <div v-if='scope.row.planstatus === "未排产"'>
                <el-tag type='danger'>未排产</el-tag>
              </div>
              <div v-else>
                <el-tag type="success">已排产</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="其他信息" width="80" type="expand">
            <template slot-scope="props">
              <el-descriptions title="其他转工信息" direction="vertical" border :column="8" :contentStyle="{'height':'30px'}"
                style="padding:10px;">
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user-solid"></i> 承制分厂排产人
                  </template>
                  {{props.row.rbplaner}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user-tickets"></i> 责任工区
                  </template>
                  {{props.row.fromworkcentername}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="计划发出时间" width="300" trigger="hover"
                      content="机加分厂在转工排产时填写的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    计划发出时间
                  </template>
                  <span v-if="props.row.plannedstartdate">{{props.row.plannedstartdate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="red" content-class-name="red">
                  <template slot="label">
                    <el-popover placement="top-start" title="发出超期时间" width="300" trigger="hover"
                      content="发出超期时间 = 接收时间 - 计划发出时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    发出超期时间
                  </template>
                  {{props.row.senddelaydays}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="计划完成时间" width="300" trigger="hover"
                      content="承制分厂在转工排产时填写的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    计划完成时间
                  </template>
                  <span v-if="props.row.plannedfinishdate">{{props.row.plannedfinishdate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="完成时间" width="300" trigger="hover" content="承制分厂转工实际完成的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    完成时间
                  </template>
                  <span v-if="props.row.completedate">{{props.row.completedate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="red" content-class-name="red">
                  <template slot="label">
                    <el-popover placement="top-start" title="完成超期时间" width="300" trigger="hover"
                      content="若承制分厂已完成，完成超期时间 = 完成时间 - 要求完成日期。若承制分厂未完成，完成超期时间 = 当前时间 - 要求完成时间。">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    完成超期时间
                  </template>
                  {{props.row.delay}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="要求完成时间" width="300" trigger="hover"
                      content="机加分厂在转工转出时需要填写的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    要求完成时间
                  </template>
                  <span v-if="props.row.needcompletedate">{{props.row.needcompletedate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="实际发出时间" width="300" trigger="hover"
                      content="机加分厂实际转工转出的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    实际发出时间
                  </template>
                  <span v-if="props.row.senddate">{{props.row.senddate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="预计完成时间" width="300" trigger="hover"
                      content="承制分厂在转工接收时需要填写的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    预计完成时间
                  </template>
                  <span v-if="props.row.estimatedcompletedate">{{props.row.estimatedcompletedate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="转入时间" width="300" trigger="hover" content="机加分厂转回到本分厂的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    转入时间
                  </template>
                  <span v-if="props.row.shipindate">{{props.row.shipindate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="red" content-class-name="red">
                  <template slot="label">
                    <el-popover placement="top-start" title="拒收时间" width="300" trigger="hover" content="承制分厂拒绝接收的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    拒收时间
                  </template>
                  <span v-if="props.row.denydate">{{props.row.denydate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="red" content-class-name="red">
                  <template slot="label">
                    <i class="el-icon-user-solid"></i> 拒收人
                  </template>
                  {{props.row.denyer}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="red" content-class-name="red">
                  <template slot="label">
                    <i class="el-icon-tickets"></i> 拒收原因
                  </template>
                  {{props.row.denyreason}}
                </el-descriptions-item>
                <!-- <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="发出提前时间" width="300" trigger="hover"
                      content="发出提前时间 = 计划发出时间 - 接收时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    发出提前时间
                  </template>
                  {{props.row.fctq}}
                </el-descriptions-item> -->
                <el-descriptions-item label-class-name="red" content-class-name="red">
                  <template slot="label">
                    <el-popover placement="top-start" title="备注" width="300" trigger="hover" content="备注：检验员填写的待处理备注信息">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    备注
                  </template>
                  {{props.row.notes}}
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="handleJiJiaDetailCurrentChange"
          :current-page="JijiaDetail.queryInfo.currentPage" :page-sizes="[JijiaDetail.queryInfo.pageSize]"
          :page-size="JijiaDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="JijiaDetail.total">
        </el-pagination>
      </el-dialog>

      <el-dialog :title="RbDetail.title" :width="'100%'" :top="'10px'" :visible.sync="RbDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="RbDetail.dataList" stripe border>
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportRbDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="主制分厂" prop="fromfactory" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="承制分厂" prop="tofactory" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件图号" prop="productname" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件名称" prop="productdescription" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="流水卡号" prop="containername" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column label="排产工序" prop="workflowstepname" width="120px" show-overflow-tooltip></el-table-column>
          <el-table-column label="备注" prop="notes" show-overflow-tooltip width="100"></el-table-column>
          <el-table-column label="排产日期" prop="stepplancreatedate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="计划发出时间" prop="plannedstartdate" width="100" :formatter="splitDate">
          </el-table-column>
          <el-table-column label="实际发出时间" prop="senddate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="接收时间" prop="toacceptdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="接收人" prop="receiver" width="60"></el-table-column>
          <el-table-column label="计划完成时间" prop="plannedfinishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="实际完成时间" prop="completedate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="转入时间" prop="recivedate" width="100" :formatter="splitDate"></el-table-column>
          </el-table-column>
          <el-table-column label="完成超期时间" prop="finishdelaydays" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.finishdelaydays > 0" style="color:red;font-weight:bold;">
                <i class="el-icon-warning"></i> {{scope.row.finishdelaydays}}天
              </div>
              <div v-else>
                {{scope.row.finishdelaydays}}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleRbDetailCurrentChange" :current-page="RbDetail.queryInfo.currentPage"
          :page-sizes="[RbDetail.queryInfo.pageSize]" :page-size="RbDetail.queryInfo.pageSize"
          layout="prev,pager,next,jumper,sizes,total" :total="RbDetail.total">
        </el-pagination>
      </el-dialog>
    </div>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="module">
    import { getParams, fetchSuggestion, exportExcelData } from '../Scripts/hooks/useCommonMethod.js'
    import { barOption, colorList } from '../Scripts/hooks/chartConfig.js'
    import { getVendorList, getFactory, getFactoryListByCode, getFactoryInfo } from '../Scripts/hooks/fetchAPI.js'
    import { prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth } from '../Scripts/hooks/useDateShortCut.js'
    import { splitDate } from '../Scripts/hooks/format.js'
    import Vue2BoardHeader from '../Scripts/components/Vue2BoardHeader.js'
    const app = new Vue({
      el: '#app',
      components: { Vue2BoardHeader },
      data: {
        splitDate,
        loading: false,
        loadingText: '数据加载中...',
        currentPage: 1,// 当前页
        pageSize: 12, // 每页显示条数
        total: 0,
        queryInfo: { factoryname: '', tofactoryname: '', productname: '', containername: '', selectdate: '' },
        dataList: [],
        factoryList: [],
        options: [],//分厂和供应商
        toFactoryList: [],
        tofactoryname: '',
        title: '无损检测中心--转工看板',
        rules: { selectdate: [{ required: true, message: '筛选时间不能为空', trigger: 'change' }] },
        JijiaDetail: {
          dialogVisiable: false,
          queryInfo: { factoryname: '', tofactoryname: '', seriesName: '', title: '', currentPage: 1, pageSize: 12 },
          dataList: [], total: 0, title: ''
        },
        RbDetail: {
          dialogVisiable: false,
          queryInfo: { factoryname: '', tofactoryname: '', seriesName: '', title: '', currentPage: 1, pageSize: 12 },
          dataList: [], total: 0, title: ''
        },
        chartHeight: window.innerHeight - 165,
        loadingConfig: { text: '数据查询中...', effect: 'whirling', maskColor: 'transparent', textColor: '#fff' },
        pickerOptions: { shortcuts: [prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth] },
        selectPageName: '',
        urlMap: [
          { name: '专项计划统计看板', pagename: 'RbSpecialItemPlanCountDashBoard' },
          { name: '齐套性检查趋势看板', pagename: 'RBCompleteSetRateChartDashBoard' },
          { name: 'APS排产统计看板', pagename: 'RbApsShipFinishDashBoardV2' },
          { name: '转工看板(生产作业会)', pagename: 'ContainerShipDashBoardSCB' },
        ]
      },
      methods: {
        // 查询件号
        searchProductAsync(value, callback) {
          fetchSuggestion({ actionName: 'getProductnameAsync', name: 'productname', value, callback });
        },
        // 查询批次号
        searchContainerAsync(value, callback) {
          fetchSuggestion({ actionName: 'getContainernameAsync', name: 'containername', value, callback });
        },
        async getData() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const dom = document.getElementById("chart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios({
            url: '../handler/board/ContainerShipDashBoardSCB.ashx?actions=getData',
            method: 'post',
            data: { ...this.queryInfo, type: 'getData' }
          })
          this.loading = false;
          chart.hideLoading();

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrFactoryname = [], arrValid = [], arrIntime = [];
          let arrIntimeRate = [], arrSpecCount = [], arrIntiteFinishCount = [], arrIntimeFinishRate = [];

          for (const i of data) {
            arrFactoryname.push(i.factoryname);
            arrValid.push(i.valid);
            arrIntime.push(i.intime);
            arrIntimeRate.push(i.intimerate);
            arrSpecCount.push(i.speccount);
            arrIntiteFinishCount.push(i.intimefinishcount);
            arrIntimeFinishRate.push(i.intimefinishrate);
          }

          let option = barOption();
          option.legend.data = ['计划发出数', '准时发出数', '准时到达率', '计划完成数', '准时完成数', '准时完成率'];
          option.yAxis[1].axisLabel.formatter = function (data) { return data + "%"; };
          option.xAxis.data = arrFactoryname;

          option.series[0] = _.merge(option.series[0], {
            name: '计划发出数', data: arrValid,
            label: { color: colorList.blue.color },
            itemStyle: { color: { colorStops: colorList.blue.colorStops } }
          });

          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '准时发出数', data: arrIntime,
            label: { color: colorList.lightGreen.color },
            itemStyle: { color: { colorStops: colorList.lightGreen.colorStops } }
          });

          option.series[2] = _.merge(_.cloneDeep(option.series[0]), {
            name: '准时到达率', data: arrIntimeRate,
            type: 'line',
            symbolSize: 8,
            yAxisIndex: 1,
            lineStyle: { width: 3, color: colorList.yellow.color },
            label: { color: colorList.yellow.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.yellow.colorStops } }
          });

          option.series[3] = _.merge(_.cloneDeep(option.series[0]), {
            name: '计划完成数', data: arrSpecCount,
            label: { color: colorList.orange.color },
            itemStyle: { color: { colorStops: colorList.orange.colorStops } }
          });

          option.series[4] = _.merge(_.cloneDeep(option.series[0]), {
            name: '准时完成数', data: arrIntiteFinishCount,
            label: { color: colorList.green.color },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });

          option.series[5] = _.merge(_.cloneDeep(option.series[0]), {
            name: '准时完成率', data: arrIntimeFinishRate,
            type: 'line',
            symbolSize: 8,
            yAxisIndex: 1,
            lineStyle: { width: 3, color: colorList.lightGreen.color },
            label: { color: colorList.white.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.white.colorStops } }
          });

          chart.setOption(option);

          window.addEventListener('resize', () => {
            chart.resize();
          });

          chart.on('click', (params) => {
            if (params.seriesName === '准时到达率' || params.seriesName === '准时完成率') { return; }
            if (params.value == 0) { return; }
            if (params.seriesName === '计划发出数' || params.seriesName === '准时发出数') {
              this.JijiaDetail.queryInfo.currentPage = 1;
              this.JijiaDetail.queryInfo.seriesName = params.seriesName;
              this.JijiaDetail.queryInfo.tofactoryname = this.queryInfo.tofactoryname;
              this.JijiaDetail.queryInfo.factoryname = params.name;
              this.JijiaDetail.title = `${params.name}【${params.seriesName}】明细`;
              this.JijiaDetail.dialogVisiable = true;
              this.getJiJiaDetail();
            } else {
              this.RbDetail.queryInfo.currentPage = 1;
              this.RbDetail.queryInfo.seriesName = params.seriesName;
              this.RbDetail.queryInfo.tofactoryname = this.queryInfo.tofactoryname;
              this.RbDetail.queryInfo.factoryname = params.name;
              this.RbDetail.title = `${params.name}【${params.seriesName}】明细`;
              this.RbDetail.dialogVisiable = true;
              this.getRbDetail();
            }
          })
        },
        async getJiJiaDetail() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/ContainerShipDashBoardSCB.ashx?action=getJiJiaDetail', {
            type: 'getJiJiaDetail',
            ...this.queryInfo,
            ...this.JijiaDetail.queryInfo
          });
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.JijiaDetail.dataList = data;
          this.JijiaDetail.total = total;
        },
        async getRbDetail() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/ContainerShipDashBoardSCB.ashx?action=getRbDetail', {
            type: 'getRbDetail',
            ...this.queryInfo,
            ...this.RbDetail.queryInfo
          });
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.RbDetail.dataList = data;
          this.RbDetail.total = total;
        },
        handleBtnSearch() {
          this.$refs['queryInfoRef'].validate((valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空');
            } else {
              this.getData();
            }
          })
        },
        handleJiJiaDetailCurrentChange(newPage) {
          this.JijiaDetail.queryInfo.currentPage = newPage;
          this.getJiJiaDetail();
        },
        handleRbDetailCurrentChange(newPage) {
          this.RbDetail.queryInfo.currentPage = newPage;
          this.getRbDetail();
        },
        async exportJijiaDetail() {
          const config = {
            url: '../handler/board/ContainerShipDashBoardSCB.ashx?action=exportJijiaDetail',
            data: {
              type: 'exportJijiaDetail',
              ...this.queryInfo,
              ...this.JijiaDetail.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        async exportRbDetail() {
          const config = {
            url: '../handler/board/ContainerShipDashBoardSCB.ashx?action=exportRbDetail',
            data: {
              type: 'exportRbDetail',
              ...this.queryInfo,
              ...this.RbDetail.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        factorySelectChange(val) {
          this.tofactoryname = this.toFactoryList.filter(item => item.factoryname === val)[0].factoryname;
          this.title = `${this.tofactoryname}--转工看板`;
          this.getData();
        },
        reloadUrl() {
          const pagename = this.selectPageName;
          let { origin, search } = window.location;
          const url = `${origin}/MESReport/kanban/${pagename}.html${search}`;
          location.href = url;
        }
      },
      async mounted() {
        const lastSaturday = dayjs().startOf('week').subtract(1, 'day').format('YYYY-MM-DD');
        const thisFriday = dayjs().startOf('week').add(5, 'day').format('YYYY-MM-DD');
        this.queryInfo.selectdate = [lastSaturday, thisFriday]; // 计划发出日期，默认本周六 ~下周五

        const [factoryList, vendorList] = await Promise.all([
          getFactory({ isMapping: '是' }),//查询主制分厂列表
          getVendorList({ vendorname: '211424|262894' })//查询供应商列表
        ]);

        for (const i of vendorList) {
          i.factoryid = i.vendorid;
          i.factoryname = i.description;
          i.factorycode = i.vendorname;
        }

        this.options = [{ label: '主制分厂', options: factoryList }, { label: '供应商', options: vendorList }];

        this.toFactoryList = await getFactoryListByCode({ factoryCode: '601|607|609|600|608|602|305', isMapping: '是' });//查询承制分厂列表
        if (getParams('factoryid')) {
          const factoryInfo = await getFactoryInfo({ factoryid: Decrypt(getParams('factoryid')), isMapping: '是' });//当前车间
          const { factoryid, factoryname } = factoryInfo[0];
          this.queryInfo.tofactoryname = factoryname;
          this.title = `${factoryname}--转工看板`;
        } else {
          const { factoryname } = this.toFactoryList[0];
          this.queryInfo.tofactoryname = factoryname;
          this.title = `${factoryname}--转工看板`;
        }
        this.getData();

        window.addEventListener('resize', () => {
          this.chartHeight = window.innerHeight - 165;
        });
      }
    })
  </script>
</body>

</html>